<template>
  <div class="video-container" :style="{ width: videoWidth, borderRadius: videoBorderRadius }">
    <div class="video-js" @click="onClickVideoBtn" :style="{ width: videoWidth, borderRadius: videoBorderRadius }">
      <div class="pause-btn" :style="{ zIndex: showPauseBtn ? 999 : -999 }"></div>
      <video :id="videoId" ref="myVideo" webkit-playsinline="true" playsinline="true"></video>
    </div>
  </div>
</template>

<script setup>
import videojs from 'video.js';
import 'video.js/dist/video-js.min.css';
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
  videoWidth: {
    type: String,
    default: '170px'
  },
  videoBorderRadius: {
    type: String,
    default: '10px'
  },
  myOptions: {
    type: Object,
    required: true,
  },
  src: {
    type: String,
    required: true,
  },
  poster: {
    type: String,
    required: true,
  },
  fullSceen: {
    type: Boolean,
    default: false
  },
});

// 设定视频配置
const options = {
  autoplay: false,
  controls: true,
  preload: "auto",
  errorDisplay: true,
  language: 'zh-CN',
  loop: false,
  fluid: true,  // 设置跟随外层容器变化大小，跟随的是外层宽度
  width: '100%',   // 设置视频宽高，具体通过传容器宽 videoWidth 和 aspectRatio 调整
  aspectRatio: "9:16",  // 默认竖屏视频 采用9:16
  notSupportedMessage: '视频格式不支持...',
  poster: props.poster,
  controlBar: {  // 设置底部的控制栏组件
    currentTimeDisplay: true,  // 当前播放事件
    timeDivider: true,   // 当前播放时间与总时间的斜杆分隔符
    durationDisplay: true,  // 是否显示总时间
    remainingTimeDisplay: false,  // 是否显示剩下的时间，该选项与是否显示总时间二选一
    children: [  // children数组顺序为控制栏中子组件顺序
      { name: "volumePanel" },
      { name: "currentTimeDisplay" },
      { name: "progressControl" },
      { name: "FullscreenToggle" },
    ]
  },
  userActions: {
    click: true,
    doubleClick: false
  },
  sources: [
    {
      src: props.src,
      type: 'video/ogg'
    },
    {
      src: props.src,
      type: 'video/mp4'
    },
    {
      src: props.src,
      type: 'video/webm'
    }],
  ...props.myOptions,
}

// 设置播放按钮
const showPauseBtn = ref(true)
const onClickVideoBtn = () => {
  if (props.fullSceen) {
    myPlayer.value.requestFullscreen();
    setTimeout(() => {
      myPlayer.value.play()
    }, 300);
  } else {
    myPlayer.value.play()
  }
}

// DOM更新后设置动态圆角 (封面 & 错误提示遮罩)
nextTick(() => {
  if (myPlayer.value) {
    let posterEl = myPlayer.value.el().querySelector('img')
    posterEl.style.borderRadius = props.videoBorderRadius
    let errMaskEl = myPlayer.value.el().querySelector('.vjs-error-display')
    errMaskEl.style.borderRadius = props.videoBorderRadius
    errMaskEl.style.zIndex = 999
  }
})

// 获取dom初始化视频 监听相关事件
const myVideo = ref(null);
const myPlayer = ref(null);
const initVideo = () => {
  const player = videojs(myVideo.value, options, function onPlayerReady() {
    console.log('播放器已初始化')
    player.on("playing", () => {
      showPauseBtn.value = false;
    });
    player.on("pause", () => {
      showPauseBtn.value = true;
    });
    player.on("fullscreenchange", () => {
      console.log(">>>> 全屏状态改变 >>>>");
    });
    player.on("useractive", () => {
      if (player.paused()) {
        player.play();
      } else {
        player.pause();
      }
    });
    player.on("error", () => {
      const error = player.error();
      switch (error.code) {
        case 1:
          console.log('用户终止了视频加载');
          break;
        case 2:
          console.log('网络错误视频加载失败');
          break;
        case 3:
          console.log('视频解码错误');
          break;
        case 4:
          console.log('视频格式不支持');
          break;
        default:
          console.log('发生未知错误');
          break;
      }
      console.log("video error:" + error?.code + "-" + error?.message);
    });
    player.on("ended", () => {
      player.load()  // 播放结束后重置视频而不是停在最后一帧
    });
  });
  myPlayer.value = player;
}

// 初始化播放器
onMounted(() => {
  initVideo()
});

// 销毁播放器
onBeforeUnmount(() => {
  myPlayer.value.dispose();
});

</script>

<style lang="less" scoped>
.video-container {
  overflow: hidden;

  :deep(.video-js) {
    height: auto;
    background-color: #FFFFFF;
    position: relative;

    // 隐藏默认的方形暂停键
    .vjs-big-play-button {
      z-index: -999
    }

    .pause-btn {
      width: 23%;
      aspect-ratio: 1 / 1;
      background: url('@/assets/images/play_m@3x.png') no-repeat;
      background-size: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    .vjs-poster img {
      object-fit: cover;
      object-position: top;
    }

    .vjs-tech {
      pointer-events: auto;
    }

    .vjs-time-control {
      display: block;
    }

    .vjs-modal-dialog-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>